<template>
  <div class="wrap">
    <nav-bar :title="cateTitle">
      <!-- <img src="/img/47.png" slot="screen" class="nav-right" /> -->
    </nav-bar>
    <div class="page">
      <product-item slot="tabItem" v-for="(v, index) in list" :key="index" :productInfo="v" ></product-item>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import sideMenu from "@/components/side-menu";
import tabs from "@/components/tabs";
import productItem from "@/components/product-item";
export default {
  name: "cate",
  data() {
    return {
      cateTitle: this.$route.query.title||'安妮农场',
      list: []
    };
  },
  components: {
    navBar,
    sideMenu,
    tabs,
    productItem
  },
  mounted(){
    this.getGoodsListByNavId()
  },
  watch:{
    navId(){
      this.getGoodsListByNavId()
    }
  },
  computed:{
    navId(){
      return this.$route.query.cate || 0
    }
  },
  methods: {
    goItemDetails(id) {
      console.log(1);
      this.$router.push({ path: `/product_detail/${id}` });
    },
    getGoodsListByNavId(){
      this.$store.dispatch('goodsListByNavId',{
        id: this.navId
      }).then(res=>{
        this.list = res.data.result.list
      }).catch(e=>{

      })
    }
  }
};
</script>
<style lang="less">
.wrap {
  height: 100%;
  width: 100%;
}
.nav-right {
  height: 20px;
  width: 20px;
}
.page {
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  box-sizing: border-box;
  .tabs {
    width: 100%;
    height: 45px;
    background-color: #fff;
    .van-tabs__line {
      background-color: #fff;
    }

    .van-tab {
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
      &.van-tab--active {
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0, 124, 157, 1);
      }
    }
  }
}
</style>


